<script setup lang="ts">
import { readFile } from '@tauri-apps/plugin-fs';
import { onMounted, Ref, ref, watch } from 'vue';


const props=defineProps(['url','size'])

const src:Ref<string|null>=ref(null);
const loadImage=async (directory:any)=>{
  try {
    const Data = await readFile(directory);
    // 创建Blob对象，用于显示图片
    const blob = new Blob([Data]);
    const Url = URL.createObjectURL(blob);
    return Url;
  } catch (error) {
    console.error('加载失败:', error);
    return '';
  }
}
const resolveChange=async()=>{
  src.value=await loadImage(props.url)
}
watch(()=>props.url,resolveChange)

onMounted(async()=>{
  src.value=await loadImage(props.url)
  //console.log(props.size)
})
</script>

<template>
    <el-image :src  lazy :fit="'fill'" :style="size"> 
      <template #error>
        <div style="line-height:16px;font-size: 12px; justify-content: center;align-items: center;display: flex;">err</div>
      </template>
    </el-image>
</template>

<style scoped>


</style>